<template>
  <view class="page_root" data-page-name="员工人效分析" data-page-identification="x_8g9tl7y3bt">

    <!-- begin vid_zjgll98b7m 自定义模板_z54fqu5wt6 -->
    <view class="main">
      <view class="bgc-img"></view>
      <view class="budget-title">
        <view class="title-icon"></view>
        <view class="budget-title-font"> {{ state.userName }} </view>
      </view>
      <view class="budget-content">
        <u-row gutter="10">
          <u-col span="6"><span class="work-title">本月参与项目数</span></u-col>
          <u-col textAlign="right" span="6"><span class="work-num">{{ state.projectCount
          }}个</span> <span class="work-unit"></span></u-col>
        </u-row>
        <u-row gutter="10">
          <u-col span="7"><span class="work-title">投入工时：</span></u-col>
          <u-col span="5" textAlign="right"><span class="work-num">{{
            state.workHourStr }}</span></u-col>
        </u-row>
        <u-row gutter="10">
          <u-col span="7"><span class="work-title">本月完成任务数：</span></u-col>
          <u-col span="5" textAlign="right"><span class="work-num">{{ state.completeTaskCount
          }}个</span><span class="work-unit"></span></u-col>

        </u-row>
        <u-row gutter="10">
          <u-col span="7"><span class="work-title">完成任务平均投入工时：</span></u-col>
          <u-col span="5" textAlign="right"><span class="work-num">{{
            state.taskWorkHour }}人天</span><span class="work-unit"></span></u-col>
        </u-row>
      </view>
      <view class="bottom-content">
        <view class="work-plan">
          <view class="work-plan-title">
            <u-row gutter="10">
              <u-col span="6" class="work-plan-font"><span class="work-icon"></span> 工作计划</u-col>
            </u-row>
          </view>
          <u-calendar v-model="state.dateShow" mode="range" @change="handleConfirmDate" toolTip="日期选择"
            :min-date='state.minDate'>

          </u-calendar>
          <view class="record-date" @click="changeDate">
            <view class="date-left">
              <view class="start-time">{{ state.selectedDate[0] }}</view>
              <view class="time-icon"><svg t="1703746842977" class="time-icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="12210" id="mx_n_1703746842978" width="200" height="200">
                  <path
                    d="M830.1 636.6a2.77 2.77 0 0 0 0.9-0.1c0.4 0 0.7-0.1 1.1-0.1 0.2 0 0.5-0.1 0.7-0.1 0.4-0.1 0.8-0.1 1.1-0.2s0.4-0.1 0.6-0.1c0.4-0.1 0.8-0.2 1.1-0.3s0.4-0.1 0.6-0.1l1.1-0.3c0.2-0.1 0.4-0.1 0.6-0.2l1-0.3a1.85 1.85 0 0 1 0.7-0.2l0.9-0.3c0.3-0.1 0.5-0.2 0.8-0.3s0.5-0.2 0.8-0.3 0.6-0.3 0.9-0.4a4.88 4.88 0 0 1 0.7-0.3c0.3-0.2 0.6-0.3 0.9-0.5l0.6-0.3c0.3-0.2 0.7-0.4 1-0.6s0.3-0.2 0.5-0.3 0.7-0.4 1-0.6 0.3-0.2 0.5-0.3a5.5 5.5 0 0 0 0.9-0.7 2.18 2.18 0 0 0 0.5-0.4 2.7 2.7 0 0 0 0.8-0.7c0.2-0.2 0.5-0.4 0.7-0.6a2.65 2.65 0 0 1 0.6-0.5 29.49 29.49 0 0 0 2.5-2.5 2.65 2.65 0 0 0 0.5-0.6c0.2-0.2 0.4-0.5 0.6-0.7a2.7 2.7 0 0 1 0.7-0.8 2.18 2.18 0 0 1 0.4-0.5 5.5 5.5 0 0 1 0.7-0.9c0.1-0.2 0.2-0.3 0.3-0.5s0.4-0.7 0.6-1 0.2-0.3 0.3-0.5 0.4-0.7 0.6-1l0.3-0.6c0.2-0.3 0.3-0.6 0.5-0.9l0.3-0.6c0.1-0.3 0.3-0.6 0.4-0.9s0.2-0.5 0.3-0.8 0.2-0.5 0.3-0.8l0.3-0.9a1.85 1.85 0 0 0 0.2-0.7c0.1-0.3 0.2-0.7 0.3-1s0.1-0.4 0.2-0.6c0.1-0.4 0.2-0.7 0.3-1.1 0-0.2 0.1-0.4 0.1-0.6a5.16 5.16 0 0 0 0.2-1.1c0-0.2 0.1-0.4 0.1-0.6 0.1-0.4 0.1-0.8 0.2-1.1s0.1-0.5 0.1-0.7c0-0.4 0.1-0.7 0.1-1.1a2.77 2.77 0 0 1 0.1-0.9 2 2 0 0 1 0.1-0.8 21.64 21.64 0 0 0 0-3.6 2 2 0 0 0-0.1-0.8 2.77 2.77 0 0 0-0.1-0.9c0-0.4-0.1-0.7-0.1-1.1 0-0.2-0.1-0.5-0.1-0.7-0.1-0.4-0.1-0.8-0.2-1.1s-0.1-0.4-0.1-0.6a5.16 5.16 0 0 1-0.2-1.1c0-0.2-0.1-0.4-0.1-0.6-0.1-0.4-0.2-0.7-0.3-1.1-0.1-0.2-0.1-0.4-0.2-0.6s-0.2-0.7-0.3-1a1.85 1.85 0 0 1-0.2-0.7l-0.3-0.9c-0.1-0.3-0.2-0.5-0.3-0.8s-0.2-0.5-0.3-0.8-0.3-0.6-0.4-0.9l-0.3-0.6c-0.2-0.3-0.3-0.6-0.5-0.9l-0.3-0.6c-0.2-0.3-0.4-0.7-0.6-1s-0.2-0.3-0.3-0.5-0.4-0.7-0.6-1-0.2-0.3-0.3-0.5a5.5 5.5 0 0 0-0.7-0.9 2.18 2.18 0 0 0-0.4-0.5 2.7 2.7 0 0 0-0.7-0.8c-0.2-0.2-0.4-0.5-0.6-0.7l-0.6-0.6c-0.4-0.4-0.8-0.9-1.2-1.3L675.5 397.8a35.91 35.91 0 0 0-50.9 0 35.91 35.91 0 0 0 0 50.9l116 116H196.5a36 36 0 0 0-36 36 36 36 0 0 0 36 36h632.8c0.3 0 0.6-0.1 0.8-0.1z"
                    p-id="12211" fill="#bfbfbf"></path>
                </svg></view>
              <view class="end-time">{{ state.selectedDate[1] }} </view>
            </view>
            <view class="date-right"><u-icon name="calendar" size="32" color="rgba(0,0,0,0.25)"></u-icon></view>
          </view>
        </view>
        <view class="bottom-detail" v-for="(item, index) in state.projectData" :key="idnex">
<view class="inner">
  <view class="detail-title">
            <view class="detail-title-font"> {{ item.projectName }} </view>
          </view>
          <view class="detail-content">
            <u-row gutter="10">
              <u-col span="6">
                <span class="work-title">参与任务数：</span><span class="work-num">{{ item.participateTaskCount }}</span>
              </u-col>
              <u-col span="6" textAlign="right" style="display: flex; justify-content: end;">
                <view class="user-tag"> <span class="plname"></span><span class="user-name">{{ item.pmName }}</span>
                </view>

              </u-col>
            </u-row>
            <u-row gutter="10">
              <u-col>
                <span class="work-title">累计投入工时数：</span><span class="work-num">{{ item.workHour }}</span><span
                  class="work-unit">人天</span>
              </u-col>
            </u-row>
            <u-row gutter="10">
              <u-col>
                <span class="work-title">完成任务平均投入工时：</span><span class="work-num">{{ item.taskWorkHour }}</span><span
                  class="work-unit">人天</span>
              </u-col>
            </u-row>
            <u-row gutter="10">
              <u-col span="10">
                <span class="work-title">任务完成进度：</span><u-line-progress style="width: 50%;" :percent="item.completeRatio"
                  :show-percent="false" activeColor="#248BFF" height="13"></u-line-progress>
              </u-col>
              <u-col span="2" textAlign="right"><span class="work-num">{{ item.completeRatio }}%</span></u-col>
            </u-row>
            <u-row gutter="10">
              <u-col></u-col>
            </u-row>
            <u-row gutter="10">
              <u-col></u-col>
            </u-row>
          </view>
</view>
        </view>
      </view>
    </view>
    <!-- end vid_zjgll98b7m 自定义模板_z54fqu5wt6 -->
  </view>
</template>
<script setup>

import {
  ref, reactive, toRaw, markRaw,
  watch, computed,
  onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, getCurrentInstance
} from "vue";
import { useRoute } from 'vue-router';
const route = useRoute();
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
// import { cloneDeep, localGet, traversalTreeStructure, set, checkCaseCondition, throttle, merge, debounce, getGridStyle, getCellRenderAble, formulaStrategy } from '@/utils/index';
// import { isEqual, isNullOrEmpty, isEmptyArr, isArray, isEmpty, isNullOrUnDef, isContained } from '@/utils/is';
import { CovertOptions, getChartsDataSourceConvert } from '@/utils/chart';
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
import { FormFormat } from '@/utils/formFormat'
import { customAddWaterMarkFunc, generateWaterMarkText } from '@/utils/addWaterMark';
import dayjs from 'dayjs';
import hashSum from 'hash-sum';

// import { handleRedirect, permission, parseJson } from '@/utils/common';
import { onPullDownRefresh, onLoad, onReady, onShow, onHide, onPageScroll, onUnload } from '@dcloudio/uni-app';
// import { BroadcastMessage } from '@/utils/BroadcastMessage';
// import { sendToken } from "@/hooks/useIframeToken";



// ---------------------------- 属性定义 ----------------------------
const sourceId = "page3000000101"

// 是否显示菜单按钮
const isMenuIconShow = false;
// NAVIGATION_MENU
const handleShowNavigation = () => { };

let isProcessState = ref(false);


const setTimeOutList = [];


const vid_zjgll98b7m_props = reactive({
  code: "",
});



// ============================ 属性定义 ============================

// ---------------------------- 元素数据引用 ----------------------------
// 组件 自定义模板_z54fqu5wt6 ref 的引用
const vid_zjgll98b7m_ref = ref(null);
// 动态key的map
const fieldTypeMap = {};
// 动态key的map
const refMap = { vid_zjgll98b7m_ref };

const showState = reactive({
  vid_zjgll98b7m_visible: true,
})
// ============================ 元素数据引用 ============================

// ---------------------------- 数据 ----------------------------


// ============================ 数据 ============================

// ---------------------------- 方法 ----------------------------
// ---------------------------- 页面数据 ----------------------------


// ============================ 页面数据 ============================

// ---------------------------- 响应 ----------------------------

// ============================ 响应 ============================

// ---------------------------- 函数 ----------------------------

// 自定义函数 返回上一页
const customFunction_goBack_p68rus9zyc = (...params) => {
  uni.navigateBack()
}

// ============================ 函数 ============================

// ---------------------------- 页面参数 ----------------------------

const pageParameter_state = reactive({
  'processInstanceId': undefined,
})

// ============================ 页面参数 ============================

// ---------------------------- 组件事件处理方法 ----------------------------


// ============================ 组件事件处理方法 ============================

// ============================ 方法 ============================

// ---------------------------- 生命周期 ----------------------------

// 获取上一层传递的数据
// const workflowChannel = new BroadcastMessage('WORKFLOW');
// workflowChannel.publish({ status: 'Ready' });
// workflowChannel.subscribe((data) => {
//   if (data) {
//     isProcessState.value = (window.self !== window.parent && data.type === 'hideHeader');
//   }
// });



const pageScrollTop = ref(0)




const routeOption = ref({})
onLoad((option) => {
  routeOption.value = option;
});
onReady(() => {
  setPageParams(routeOption.value)
  // 设置表单的rule
  try {

  } catch {
    // do nothing
  }
});
// 图表刷新标记
const uChartsReshowFlag = ref(false);
onHide(() => { // 页面隐藏后标记置为false(如果不置为false无法触发图表更新)
  uChartsReshowFlag.value = false
})
onShow(() => {
  uChartsReshowFlag.value = true; // 页面激活后,标记置为true

  setPageParams(routeOption.value)
})
onPageScroll(e => {
  pageScrollTop.value = e.scrollTop
});


const setPageParams = (routerParam) => {
  const pageParams = [{ "dataType": "STRING", "dependencies": [], "name": "processInstanceId" }];
  const strategyMap = {
    STRING: (param, paramValue) => {
      pageParameter_state[param.name] = paramValue;
    },
    BOOLEAN: (param, paramValue) => {
      if ('true' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = true
      } else if ('false' === (paramValue || '').toLowerCase()) {
        pageParameter_state[param.name] = false
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    NUMBER: (param, paramValue) => {
      if (!isNaN(paramValue)) {
        pageParameter_state[param.name] = Number(paramValue);
      } else {
        // TODO: 是否要支持toast
        console.error('参数传入错误！类型不匹配！');
      }
    },
    ARRAY: (param, paramValue) => {
      if (isNullOrUnDef(paramValue) || !paramValue || paramValue === 'undefined') { // default value
        pageParameter_state[param.name] = [];
      } else if (paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
        try {
          pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
        } catch (error) {
          console.error('参数解析失败 ', error);
        }
      } else {
        console.error('参数传入错误！类型不匹配！');
      }
    },
  };
  pageParams.forEach((param) => {
    strategyMap[param.dataType](param, routerParam[param.name])
  });


}

onUnmounted(() => {
  // 销毁定时器
  setTimeOutList.forEach(({ repeat, timer }) => {
    repeat ? clearInterval(timer) : clearTimeout(timer);
  });
});



onPullDownRefresh(() => {
  // 下拉刷新
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})


// ============================ 生命周期 ============================

// ---------------------------- 数据关联处理 ----------------------------
// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================
//
// ============================ 数据关联处理 ============================

// ---------------------- 不同组件自定义的处理逻辑 ---------------------

// ====================== 不同组件自定义的处理逻辑 ======================
'年', '月', '周'

// ================================定制化逻辑========================================

onMounted(() => {
  let a = document.querySelector('.uni-page-head')
  if (a) a.remove()
  // 获取当前日期
  const today = dayjs();

  // 获取本月第一天
  const firstDayOfMonth = today.startOf('month');

  // 格式化日期为 YYYY-MM-DD
  state.selectedDate[0] = firstDayOfMonth.format('YYYY-MM-DD');
  state.selectedDate[1] = today.format('YYYY-MM-DD');
  // 获取当前 URL 中问号后的参数部分
  const queryString = window.location.search

  // 使用 URLSearchParams 解析参数字符串
  const urlParams = new URLSearchParams(queryString)

  // 遍历参数并输出
  urlParams.forEach((value, key) => {
    console.log(`${key}: ${value}`)
  })

  // 获取特定参数的值
  const userName = urlParams.get('name')
  state.userName = userName
  const params = {
    name: userName
  }
  post(`/solution-ppm/api/v2/built-in-system-ppm/dashboard/human-efficiency-analysis/detail`, params).then(({ data }) => {
    state.projectCount = data.projectCount
    state.workHour = data.workHour
    state.completeTaskCount = data.completeTaskCount
    state.workHourStr = data.workHourStr
    state.taskWorkHour = data.taskWorkHour
  })
  getBottomData()
})
function getBottomData() {
  const params = {
    startTime: state.selectedDate[0],
    endTime: state.selectedDate[1],
    name: state.userName
  }
  post('/solution-ppm/api/v2/built-in-system-ppm/dashboard/human-efficiency-analysis/work-plan', params).then(({ data }) => {
    state.projectData = data.humanEfAnWorkPlanDetailDtoList
  })
}
const state = reactive({
  userName: '',
  dateShow: false,
  selectedDate: [],
  projectCount: '',
  workHour: '',
  workHourStr: '',
  completeTaskCount: '',
  taskWorkHour: "",
  projectData: [],
  minDate: ''
})
function changeDate() {
  state.dateShow = true
}
function handleConfirmDate(params) {
  state.selectedDate[0] = params.startDate
  state.selectedDate[1] = params.endDate
  getBottomData()
}
function getSixMonthsAgoDate() {
  // 获取当前日期
  let currentDate = new Date();

  // 获取当前月份
  let currentMonth = currentDate.getMonth() + 1; // 注意：月份是从 0 开始的，所以要加 1

  // 获取当前年份
  let currentYear = currentDate.getFullYear();

  // 计算6个月前的年份和月份
  let sixMonthsAgoYear = currentYear;
  let sixMonthsAgoMonth = currentMonth - 6;

  // 处理跨年的情况
  if (sixMonthsAgoMonth <= 0) {
    sixMonthsAgoYear--;
    sixMonthsAgoMonth += 12;
  }

  // 设置日期为月初的第一天
  let sixMonthsAgoDate = new Date(sixMonthsAgoYear, sixMonthsAgoMonth - 1, 1);

  // 格式化日期为 YYYY-MM-DD
  let formattedDate = sixMonthsAgoDate.toISOString().slice(0, 10);

  return formattedDate;
}

// 调用函数获取6个月前的日期
let sixMonthsAgo = getSixMonthsAgoDate();
state.minDate = sixMonthsAgo
</script>
<style lang="less" scoped>
.page_root {
  min-height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #daf1ff 100%, #ffffff 0%);
  overflow: hidden !important;
}

.budget-title {
  height: 80px;
  background-image: linear-gradient(270deg, rgba(0, 121, 255, 0.00) 0%, #0079FF 100%);
  border-radius: 6px;
  padding: 8px 15px;
  display: flex;
  position: relative;
  background-size: cover;
}

.date-time {
  position: absolute;
  right: 0;
  font-size: 12px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 400;
  top: 12px;
}

.date-time-picker {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 400;

}

.budget-title-font {
  font-size: 16px;
  color: #FFFFFF;
  text-shadow: 0 4px 20px #0063A4;
  font-weight: 600;
  margin-left: 8px;
}


.budget-content {
  height: 128px;
  width: 100%;
  border: 1px solid #fff;
  position: relative;
  top: -40px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(255, 255, 255, 0.80) 100%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 4px 10px 0 #CFE7FF;
  border-radius: 6px;
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
  padding: 12px 15px;
  line-height: 1.8;
  /* 添加模糊效果，可以调整模糊半径 */
}

.main {
  height: calc(100vh - 90px);
  background: linear-gradient(180deg, #E1EFFD 100%, #ffffff 0%);
  padding: 15px;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
}

.bgc-img {
  position: absolute;
  width: 100%;
  height: 300px;
  left: 0;
  top: -180px;
  background-image: url('http://10.40.0.33:9001/file-storage/416680575854426112.png');

  background-size: cover;
}

.work-title {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 400;
  display: inline-block;
}

.work-num {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
  display: inline-block;
}

.bottom-content {
  overflow: auto;
  position: absolute;
  top: 200px;
  height: calc(100vh - 260px);
  background: #FFFFFF;
  border-radius: 12px 12px;
  width: 100%;
  left: 0;
  padding: 15px;
}

.detail-title {
  height: 40px;
  background-image: linear-gradient(90deg, #CDE8FD 0%, rgba(205, 232, 253, 0.00) 100%);
  padding: 8px 15px;
  display: flex;

}

.detail-title-font {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #262626;
  letter-spacing: 0;
  font-weight: 600;
}


.detail-content {
  height: 122px;
  width: 100%;
  border: 1px solid #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(255, 255, 255, 0.80) 100%);
  border: 1.5px solid #FFFFFF;
  box-shadow: 0 4px 10px 0 #CFE7FF;
  border-radius: 6px;
  backdrop-filter: blur(5px);
  border: 1px solid #fff;
  padding: 8px 15px;
  line-height: 1.8;
}


.user-tag {
  background-image: linear-gradient(270deg, rgba(205, 232, 253, 0.00) 0%, #CDE8FD 100%);
  border-radius: 10px;
  height: 20px;
  min-width: 60px;
  padding: 0 0 0 10px;
  line-height: 20px;
}

.user-icon {
  width: 16px;
  height: 18px;
}

.user-name {
  position: relative;
  top: -2px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  font-family: PingFangSC-Semibold;
  font-size: 12px;
  color: #595959;
  letter-spacing: 0;
  font-weight: 600;
  padding-right: 3px;
}

.plname {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-image: url('http://10.40.0.33:9001/file-storage/416682682311489536.png');
  background-size: cover;
}

.work-plan {
  height: 86px;
}

.work-plan-font {
  padding-left: 15px;
  line-height: 25px;
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #262626;
  font-weight: 600;
}

.record-date {
  display: flex;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  margin: 14px 0;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #262626;
  line-height: 32px;
  font-weight: 400;
  padding: 0 15px 0 15px;
  line-height: 40px;
}

.date-left {
  display: flex;
  justify-content: space-between;
}

.date-left {
  width: 70%;
  font-size: 14px;
}

.date-right {
  flex: 1;
  text-align: right;
  line-height: 30px;
}

.time-icon {
  height: 16px;
  width: 16px;
}

.work-icon {
  margin-right: 3px;
  position: relative;
  top: 2px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('http://10.40.0.33:9001/file-storage/416539371340806144.png');
  background-size: cover;
}

.title-icon {
  position: relative;
  top: 3px;
  height: 18px;
  width: 15px;
  background-image: url('http://10.40.0.33:9001/file-storage/416539678170920960.png');
  background-size: cover;
}

:global(.u-active) {
  border-radius: inherit
}

.bottom-detail {
  margin-bottom: 15px;
  overflow: hidden;
  border-radius: 3px;
}

.start-time,
.end-time {
  line-height: 30px;

}
.inner {
  border: 2px solid;
  border-image: linear-gradient(360deg, rgba(41, 129, 223, 0) 0%, rgba(41, 129, 223, 1) 100%) 3 3 3 3;
  height: 100%;
}
</style>